<!--项目台账 在建/完结项目列表-->
<template>
  <div>
    <el-row>
      <el-form
        ref="ruleForm"
        label-width="80px"
        :model="queryParams"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="项目名称">
              <el-input v-model="queryParams.xmmc" placeholder="搜索关键字"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" align="left">
            <el-form-item label="项目编号">
              <el-input v-model="queryParams.xmbh" placeholder="搜索关键字"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" align="left">
            <el-form-item label="项目类型">
              <el-select v-model="queryParams.xmlx" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" align="right">
            <div style="padding-bottom: 20px">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="small"
              >筛选
              </el-button
              >
              <el-button
                icon="el-icon-refresh"
                size="small"
              >重置
              </el-button
              >
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <el-row>
      <el-col :span="3">
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText">
        </el-input>
        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          ref="tree">
        </el-tree>
      </el-col>
      <el-col :span="21">
        <el-table :data="projectList" :header-cell-style="{backgroundColor: '#e7f6f3'}" @row-click="onClickImage('ledgerrow')"
                  style="margin-left: 15px">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="lxrq" label="立项日期" show-overflow-tooltip></el-table-column>
          <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="xmbh" label="项目编号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="xmlx" label="项目类型" show-overflow-tooltip></el-table-column>
          <el-table-column prop="fzr" label="项目负责人" show-overflow-tooltip></el-table-column>
          <el-table-column prop="jhks" label="计划开始" show-overflow-tooltip></el-table-column>
          <el-table-column prop="jhjs" label="计划结束" show-overflow-tooltip></el-table-column>
          <el-table-column prop="ks" label="实际开始" show-overflow-tooltip></el-table-column>
          <el-table-column prop="js" label="实际结束" show-overflow-tooltip></el-table-column>
          <el-table-column prop="jd" label="进度" show-overflow-tooltip></el-table-column>
          <el-table-column prop="status" label="状态" show-overflow-tooltip></el-table-column>
          <el-table-column prop="operation" label="操作" width="250px" v-if="status!='com'">
            <template slot-scope="scope">
              <el-button type="primary" plain @click.native.stop="onClick({name: '计划审批',value: 'jhsp', row: scope.row})">计划审批</el-button>
              <el-dropdown @command="onClick">
                <el-button type="primary" plain>更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="{name:'项目预算',value:'xmys',row:scope.row}">项目预算</el-dropdown-item>
                  <el-dropdown-item :command="{name:'项目预算',value:'xmjx',row:scope.row}">项目验收</el-dropdown-item>
                  <el-dropdown-item :command="{name:'停工申请',value:'sqsq',row:scope.row}">停工申请</el-dropdown-item>
                  <el-dropdown-item :command="{name:'复工申请',value:'sqsq',row:scope.row}">复工申请</el-dropdown-item>
                  <el-dropdown-item :command="{name:'终止申请',value:'sqsq',row:scope.row}">终止申请</el-dropdown-item>
                  <el-dropdown-item :command="{name:'进度报告',value:'jdbg',row:scope.row}">进度报告</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" style="margin: 0 25px 28px;"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ledgerTable",
  data(){
    return{
      queryParams:{
        xmmc:'',
        xmbh:'',
        xmlx: undefined,
        pageNum:1,
        pageSize:20
      },
      total:0,
      options:[],
      filterText:'',
      data:[
        {
          id: 1,
          label: '项目类型',
          children: [{
            id: 11,
            label: '防沙治沙',
          },{
            id: 12,
            label: '植树造林',
          },{
            id: 13,
            label: '绿化改造',
          },{
            id: 14,
            label: '机器人造林',
          },
          ]
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      projectList:[
        {lxrq:'2022-08-09',projectName:'风光一体化防沙治沙',xmbh:'FGYT23684325',xmlx:'防沙治沙', fzr:'朱X',jhks:'2022-09-01',jhjs:'2023-09-01',sjks:'2022-09-01',sjjs:'',jd:'30%',status:'执行' },
        {lxrq:'2022-08-09',projectName:'三北六期',xmbh:'FGYT23684325',xmlx:'植树造林', fzr:'王XX',jhks:'2022-09-01',jhjs:'2023-09-01',sjks:'2022-09-01',sjjs:'2023-07-30',jd:'100%',status:'执行' },
        {lxrq:'2022-08-09',projectName:'蚂蚁森林',xmbh:'FGYT23684325',xmlx:'绿化改造', fzr:'李XX',jhks:'2022-09-01',jhjs:'2023-09-01',sjks:'2022-09-01',sjjs:'',jd:'0%',status:'执行' },
        {lxrq:'2022-08-09',projectName:'蓝旗机器人造林',xmbh:'FGYT23684325',xmlx:'机器人造林', fzr:'朱X',jhks:'2022-09-01',jhjs:'2023-09-01',sjks:'2022-09-01',sjjs:'',jd:'60%',status:'执行' },
      ]
    }
  },
  props:{
    status:{
      type: String,
      default: ''
    }
  },
  mounted() {
    this.total = this.projectList.length
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    onClick(row){
      this.$emit('showFormModal',row)
    },
    onClickImage(value){
      let param = {}
      param.image = require(`../images/${value}.png` );
      this.$emit('showModal',param)
    }
  },
}
</script>

<style scoped>

</style>
